<template>
  <div class="base-layout">
    <div v-if="['homeIndex'].indexOf($route.name) !== -1" class="van-hairline--bottom van-nav-bar" style="z-index: 1;">
      <div class="van-nav-bar__left" style="left: 8px;top: 5px;"><img src="../assets/images/logo.png" style="height: 20px;" /></div>
      <div class="van-ellipsis van-nav-bar__title">首页</div>
      <div class="van-nav-bar__right" @click="onClickRight"><span class="van-nav-bar__text"><img src="../assets/images/message.png" style="height: 14px;" /></span></div>
    </div>

    <div v-else class="van-hairline--bottom van-nav-bar" style="z-index: 1;">
      <div class="van-nav-bar__left" @click="onClickLeft"><i class="van-icon van-icon-arrow van-nav-bar__arrow"></i><span class="van-nav-bar__text">返回</span></div>
      <div class="van-ellipsis van-nav-bar__title">{{ $route.meta.title }}</div>
      <div class="van-nav-bar__right" @click="onClickRight"><span class="van-nav-bar__text"><img src="../assets/images/message.png" style="height: 14px;" /></span></div>
    </div>

    <router-view/>

    <div class="van-tabbar van-hairline--top-bottom van-tabbar--fixed">
      <router-link class="van-tabbar-item" :to="{name:'homeIndex'}">
        <div class="van-tabbar-item__icon"><img src="../assets/images/m-van-tabbar-item-1.png" /></div>
        <div class="van-tabbar-item__text van-tag--plain van-tag--danger">首页</div>
      </router-link>
      <div class="van-tabbar-item" @click="onClickTrade">
        <div class="van-tabbar-item__icon"><img src="../assets/images/m-van-tabbar-item-2.png" /></div>
        <div class="van-tabbar-item__text">商户专区</div>
      </div>
      <router-link class="van-tabbar-item" :to="{name:'game'}">
        <div class="van-tabbar-item__icon"><img src="../assets/images/m-van-tabbar-item-3.png" /></div>
        <div class="van-tabbar-item__text">游戏</div>
      </router-link>
      <router-link class="van-tabbar-item" :to="{name:'cart'}">
        <div class="van-tabbar-item__icon"><img src="../assets/images/m-van-tabbar-item-4.png" /></div>
        <div class="van-tabbar-item__text">购物车</div>
      </router-link>
      <router-link class="van-tabbar-item" :to="{name:'user'}">
        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-contact"></i></div>
        <div class="van-tabbar-item__text">我的</div>
      </router-link>
    </div>

    <!--
    <van-popup v-model="isShowTrade" position="bottom">
      <div class="van-tabbar van-hairline--top-bottom van-tabbar--fixed">
        <router-link class="van-tabbar-item" :to="{name:'tradeBuy'}">
          <div class="van-tabbar-item__icon"><i class="van-icon van-icon-add2"></i></div>
          <div class="van-tabbar-item__text">预约进货</div>
        </router-link>
        <router-link class="van-tabbar-item" :to="{name:'tradeSell'}">
          <div class="van-tabbar-item__icon"><i class="van-icon van-icon-cash-on-deliver"></i></div>
          <div class="van-tabbar-item__text">托管销售</div>
        </router-link>
        </router-link>
        <router-link class="van-tabbar-item" :to="{name:'tradeBuyLog'}">
          <div class="van-tabbar-item__icon"><i class="van-icon van-icon-browsing-history"></i></div>
          <div class="van-tabbar-item__text">进货记录</div>
        </router-link>
        <router-link class="van-tabbar-item" :to="{name:'tradeSellLog'}">
          <div class="van-tabbar-item__icon"><i class="van-icon van-icon-other-pay"></i></div>
          <div class="van-tabbar-item__text">销售记录</div>
        </router-link>
      </div>
    </van-popup>
    -->

    <van-popup v-model="isShowTrade" class="trade-popup" position="bottom">
      <div class="van-hairline--top-bottom van-badge-group">
        <router-link class="van-badge van-hairline" :to="{name:'tradeBuy'}">预约进货</router-link>
        <router-link class="van-badge van-hairline" :to="{name:'tradeSell'}">托管销售</router-link>
        <router-link class="van-badge van-hairline" :to="{name:'tradeBuyLog'}">进货记录</router-link>
        <router-link class="van-badge van-hairline" :to="{name:'tradeSellLog'}">销售记录</router-link>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { NavBar, Tabbar, TabbarItem, Popup, Badge, BadgeGroup } from 'vant';

export default {
  data() {
    return {
      isShowTrade: false
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Popup.name]: Popup,
    [Badge.name]: Badge,
    [BadgeGroup.name]: BadgeGroup
  },
  methods: {
    onClickLeft() {
      if (['homeIndex'].indexOf(this.$route.name) === -1) {
        this.$router.go(-1);
      }
    },
    onClickRight() {
      this.$router.push({ 'name': 'notice' });
    },
    onClickTrade() {
      this.isShowTrade = true;
    }
  }
};

</script>

<style>
.base-layout .van-nav-bar {
  background-color: #faaf20;
  height: 40px;
  line-height: 40px;
}
.base-layout .van-nav-bar > .van-nav-bar__left > .van-icon,
.base-layout .van-nav-bar > .van-nav-bar__left > .van-nav-bar__text,
.base-layout .van-nav-bar > .van-nav-bar__right > .van-nav-bar__text {
  color: #000;
  font-size: 16px;
}
.base-layout .van-tabbar-item .van-tabbar-item__icon  img {
  height: 1.2rem;
}
.base-layout .van-tabbar-item .van-tabbar-item__icon > .van-icon {
  font-size: 1.2rem;
}
.base-layout .van-tabbar-item .van-tabbar-item__text.van-tag--danger {
  color: #faaf20;
}
.trade-popup {
  width: auto;
  left: 30%;
  bottom: 50px;
}

.trade-popup .van-badge {
  padding: 10px;
}
.base-layout .van-modal {
  background-color: transparent;
}
</style>
